 <template>
  <div class="spaceDetail">
    <!-- 查看空间详情 -->
    <div class="infoBox">
      <div class="header">
        <div class="logo">
          <img :src="spaceList.avatar" alt="" style="width:50px;height:50px;border-radius:10px">
        </div>
        <div class="spaceTitle">{{spaceList.spaceName}}</div>
        <span>创建时间:{{spaceList.createTime}}</span>
      </div>
      <div class="content">
        <div class="btt">
          <!-- <div style="display:inline-block;margin-left:-15%"> -->
          <span v-if="spaceList.type===1">空间类型：民宿</span>
          <span v-if="spaceList.type===2">空间类型：咖啡馆</span>
          <span v-if="spaceList.type===3">空间类型：创意空间</span>
          <span v-if="spaceList.type===4">空间类型：其他</span>
          <!-- </div> -->
          <span>建筑风格：{{spaceList.architecturalStyle}}</span>
          <span>空间特色：{{spaceList.feature}}</span>
        </div>
        <div class="btt">
          <span>空间标题：{{spaceList.title}}</span>
          <span>联系方式：{{spaceList.mobile}}</span>
        </div>
        <div style="white-space:normal;width:88%;line-height:20px">空间简介：{{spaceList.description}}</div>
        <div class="btn1">
          <el-button type="text" @click="seeSpaceImg" v-show="!isShow">查看空间图片↓</el-button>
        </div>
        <div class="cover">
          <img :src="spaceList.cover" alt="" style="width:800px;height:auto;margin-left:calc(50%-400px)">
        </div>
        <el-collapse-transition>
          <div class="spaceImg" v-show="isShow">
            <ul>
              <li style="width:800px;font-size:20px;margin-top:20px;margin-bottom:20px;text-align:center">「 公共区域 」&emsp;{{imgsDataPublic.roomDes}}</li>
              <li v-for="(img,i) in imgsDataPublic.ImgData" :key="i"><img :src="img.path" alt="" style="width:800px"></li>
            </ul>
            <ul v-for="(item, v) in imgsDataRoom" :key="v" v-if="roomImg">
              <li style="width:800px;font-size:20px;margin-top:20px;margin-bottom:20px;text-align:center">「 {{item.roomName}} 」&emsp;{{item.roomDes}}</li>
              <li v-for="(items, iv) in item.ImgData" :key="iv" style="width:800px"><img :src="items.path" alt="" style="width:800px"></li>
            </ul>
            <ul v-for="(val, index) in imgsDataYp" :key="index" v-if="ypImg">
              <li style="width:800px;font-size:20px;margin-top:20px;margin-bottom:20px;text-align:center">「 {{val.roomName}} 」&emsp;{{val.roomDes}}</li>
              <li v-for="(vals, it) in val.ImgData" :key="it" style="width:800px"><img :src="vals.path" alt="" style="width:800px"></li>
            </ul>
          </div>
        </el-collapse-transition>
        <div class="btn2" v-show="isShow">
          <el-button type="primary" icon="el-icon-upload2" circle @click="upSpaceImg"></el-button>
        </div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">价格信息</div>
      <div class="content">
        <div class="stage" v-show="qtPrice">
          <span class="stageTitle">█▌全天拍摄：{{spaceList.startTime}}~{{spaceList.endTime}}</span>
          <div class="usualPrice">
            <span class="title">平时价格</span>
            <div style="margin-top:10px;" v-show="typeSpace==1">公共区域：{{spaceList.publicPrice}}&nbsp;
              <p>元/天</p>
            </div>
            <div style="margin-top:10px;" v-show="typeSpace==2">整个空间：{{spaceList.publicPrice}}&nbsp;
              <p>元/天</p>
            </div>
            <div>
              <div style="margin-top:10px;margin-left:-50px">
                <div v-for="(item,index) in roomData" :key="index" style="display:inline-block">
                  <span>{{item.roomName}}：</span>
                  <span style="margin-left:0px">{{spaceList.roomPrice}}&nbsp;
                    <p>元/天</p>
                  </span>
                </div>
              </div>
            </div>
            <div style="margin-left:-50px;margin-top:10px;margin-bottom:10px">
              <span>人数限制：{{spaceList.maxPeople + '人'}}</span>
              <span style="margin-left:70px">允许进场器材：{{spaceList.admissionEquipment}}</span>
            </div>
          </div>
          <div class="usualPrice">
            <span class="title">周末节假日价格</span>
            <div style="margin-top:10px;" v-show="typeSpace==1">公共区域：{{spaceList.publicWeekendPrice}}&nbsp;
              <p>元/天</p>
            </div>
            <div style="margin-top:10px;" v-show="typeSpace==2">整个空间：{{spaceList.publicWeekendPrice}}&nbsp;
              <p>元/天</p>
            </div>
            <div>
              <div style="margin-top:10px;margin-left:-50px">
                <div v-for="(item,index) in roomData" :key="index" style="display:inline-block">
                  <span>{{item.roomName}}：</span>
                  <span style="margin-left:0px">{{spaceList.roomWeekendPrice}}&nbsp;
                    <p>元/天</p>
                  </span>
                </div>
              </div>
            </div>
            <div style="margin-left:-50px;margin-top:10px;">
              <span>人数限制：{{spaceList.maxPeopleWeekend + '人'}}</span>
              <span style="margin-left:70px">允许进场器材：{{spaceList.admissionEquipmentWeekend}}</span>
            </div>
          </div>
        </div>
        <div class="stage" v-show="sbtPrice">
          <span class="stageTitle">█▌上半天拍摄：{{spaceList.startTimeAm}}~{{spaceList.endTimeAm}}</span>
          <div class="usualPrice">
            <span class="title">平时价格</span>
            <div style="margin-top:10px;" v-show="typeSpace==1">公共区域：{{spaceList.publicPriceHalfAm}}&nbsp;
              <p>元/天</p>
            </div>
            <div style="margin-top:10px;" v-show="typeSpace==2">整个空间：{{spaceList.publicPriceHalfAm}}&nbsp;
              <p>元/天</p>
            </div>
            <div>
              <div style="margin-top:10px;margin-left:-50px">
                <div v-for="(item,index) in roomData" :key="index" style="display:inline-block;">
                  <span>{{item.roomName}}：</span>
                  <span style="margin-left:0px">{{spaceList.roomPriceHalfAm}}&nbsp;
                    <p>元/天</p>
                  </span>
                </div>
              </div>
            </div>
            <div style="margin-left:-50px;margin-top:10px;margin-bottom:10px">
              <span>人数限制：{{spaceList.maxPeopleAm + '人'}}</span>
              <span style="margin-left:70px">允许进场器材：{{spaceList.admissionEquipmentAm}}</span>
            </div>
          </div>
          <div class="usualPrice">
            <span class="title">周末节假日价格</span>
            <div style="margin-top:10px;" v-show="typeSpace==1">公共区域：{{spaceList.publicWeekendPriceHalfAm}}&nbsp;
              <p>元/天</p>
            </div>
            <div style="margin-top:10px;" v-show="typeSpace==2">整个空间：{{spaceList.publicWeekendPriceHalfAm}}&nbsp;
              <p>元/天</p>
            </div>
            <div>
              <div style="margin-top:10px;margin-left:-50px">
                <div v-for="(item,index) in roomData" :key="index" style="display:inline-block;">
                  <span>{{item.roomName}}：</span>
                  <span style="margin-left:0px">{{spaceList.roomWeekendPriceHalfAm}}&nbsp;
                    <p>元/天</p>
                  </span>
                </div>
              </div>
            </div>
            <div style="margin-left:-50px;margin-top:10px;">
              <span>人数限制：{{spaceList.maxPeopleAmWeekend + '人'}}</span>
              <span style="margin-left:70px">允许进场器材：{{spaceList.admissionEquipmentAmWeekend}}</span>
            </div>
          </div>
        </div>
        <div class="stage" v-show="xbtPrice">
          <span class="stageTitle">█▌下半天拍摄：{{spaceList.startTimePm}}~{{spaceList.endTimePm}}</span>
          <div class="usualPrice">
            <span class="title">平时价格</span>
            <div style="margin-top:10px;" v-show="typeSpace==1">公共区域：{{spaceList.publicPriceHalfPm}}&nbsp;
              <p>元/天</p>
            </div>
            <div style="margin-top:10px;" v-show="typeSpace==2">整个空间：{{spaceList.publicPriceHalfPm}}&nbsp;
              <p>元/天</p>
            </div>
            <div>
              <div style="margin-top:10px;margin-left:-50px">
                <div v-for="(item,index) in roomData" :key="index" style="display:inline-block;">
                  <span>{{item.roomName}}：</span>
                  <span style="margin-left:0px">{{spaceList.roomPriceHalfPm}}&nbsp;
                    <p>元/天</p>
                  </span>
                </div>
              </div>
            </div>
            <div style="margin-left:-50px;margin-top:10px;margin-bottom:10px">
              <span>人数限制：{{spaceList.maxPeoplePm + '人'}}</span>
              <span style="margin-left:70px">允许进场器材：{{spaceList.admissionEquipmentPm}}</span>
            </div>
          </div>
          <div class="usualPrice">
            <span class="title">周末节假日价格</span>
            <div style="margin-top:10px;" v-show="typeSpace==1">公共区域：{{spaceList.publicWeekendPriceHalfPm}}&nbsp;
              <p>元/天</p>
            </div>
            <div style="margin-top:10px;" v-show="typeSpace==2">整个空间：{{spaceList.publicWeekendPriceHalfPm}}&nbsp;
              <p>元/天</p>
            </div>
            <div>
              <div style="margin-top:10px;margin-left:-50px">
                <div v-for="(item,index) in roomData" :key="index" style="display:inline-block">
                  <span>{{item.roomName}}：</span>
                  <span style="margin-left:0px">{{spaceList.roomWeekendPriceHalfPm}}&nbsp;
                    <p>元/天</p>
                  </span>
                </div>
              </div>
            </div>
            <div style="margin-left:-50px;margin-top:10px;">
              <span>人数限制：{{spaceList.maxPeoplePmWeekend + '人'}}</span>
              <span style="margin-left:70px">允许进场器材：{{spaceList.admissionEquipmentPmWeekend}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">配套设施</div>
      <div class="content" style="padding-bottom:20px">
        <div class="facil" v-if="stayPrice">提前入住：{{spaceList.stayPriceFc}}&nbsp;
          <p>元/天</p>
          <p>(方寸平台价格)</p>&emsp;&emsp;&emsp;{{spaceList.stayPriceMd}}&nbsp;
          <p>元/天</p>
          <p>(门店价格)</p>
        </div>
        <div class="facil" v-if="lunchPrice">工作午餐：{{spaceList.lunchPriceFc}}&nbsp;
          <p>/人</p>
          <p>(方寸平台价格)</p>&emsp;&emsp;&emsp;{{spaceList.lunchPriceMd}}&nbsp;
          <p>/人</p>
          <p>(门店价格)</p>
        </div>
        <div class="facil" v-if="dinnerPrice">工作晚餐：{{spaceList.dinnerPriceFc}}&nbsp;
          <p>/人</p>
          <p>(方寸平台价格)</p>&emsp;&emsp;&emsp;{{spaceList.dinnerPriceMd}}&nbsp;
          <p>/人</p>
          <p>(门店价格)</p>
        </div>
        <div class="facil">便利设施：{{spaceList.facilities}}</div>
        <div class="facil">拍摄须知：
          <div style="margin-top:-22px;margin-left:-10px">
            <div class="notes" v-for="(item,i) in spaceList.notes" :key="i">{{i + 1 + '. ' + item}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">评论列表</div>
      <div class="content" style="margin-top:20px">
        <el-table :data="userData" style="width: 98%;margin-left:1%" empty-text="没有评论信息">
          <el-table-column prop="name" label="用户昵称" min-width="120" align="center">
          </el-table-column>
          <el-table-column  label="用户头像" min-width="120" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.photo" alt="" style="width:80px;height:80px;border-radius:50%">
            </template>
          </el-table-column>
          <el-table-column prop="star" label="星级" min-width="140" align="center">
            <template slot-scope="scope">
              <el-rate v-model="scope.row.star" disabled :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="评论内容" min-width="520" align="center">
          </el-table-column>
          <el-table-column prop="createTime" :formatter="dateFormat" label="操作时间" min-width="120" align="center">
          </el-table-column>
        </el-table>
        <div class="btn">
          <el-button type="primary" @click="seeMore" style="margin-bottom:20px" v-if="this.userData.length > 4">查看更多</el-button>
        </div>
      </div>
      <el-dialog title="评论列表" :modal="zhezhao" :visible.sync="dialogTableVisible">
        <el-table :data="userDataMore" style="width: 98%;margin-left:1%" empty-text="没有评论信息">
          <el-table-column prop="name" label="用户昵称" min-width="120" align="center">
          </el-table-column>
          <el-table-column  label="用户头像" min-width="120" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.photo" alt="" style="width:80px;height:80px;border-radius:50%">
            </template>
          </el-table-column>
          <el-table-column prop="star" label="星级" min-width="140" align="center">
            <template slot-scope="scope">
              <el-rate v-model="scope.row.star" disabled :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="评论内容"  align="center">
          </el-table-column>
          <el-table-column prop="createTime" :formatter="dateFormat" label="操作时间" min-width="120" align="center">
          </el-table-column>
        </el-table>
        <div class="pageContainer">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
// import { formateDate } from '@/assets/js/untils'
export default {
  name: 'spaceDetail',
  // untils[formateDate],
  data () {
    return {
      dialogTableVisible: false,
      pageSizeArray: [10, 20, 30, 40, 50],
      pageNo: 1,
      pageSize: 10,
      pageTotal: null,
      loadingList: false,
      total: 0,
      stayPrice: true,
      lunchPrice: true,
      dinnerPrice: true,
      isShow: false,
      roomImg: false,
      ypImg: false,
      zhezhao: false,
      qtPrice: false,
      sbtPrice: false,
      xbtPrice: false,
      typeSpace: 1,
      userData: [],
      userDataMore: [],
      roomData: [
        {
          //
        }
      ],
      imgsDataPublic: [
        // {
        //   roomName: '',
        //   roomDes: '',
        //   ImgData: [
        //     { path: '' }
        //   ]
        // }
      ],
      imgsDataRoom: [
        // {
        //   roomName: '',
        //   roomDes: '',
        //   ImgData: [
        //     { path: '' }
        //   ]
        // }
      ],
      imgsDataYp: [
        // {
        //   roomName: '',
        //   roomDes: '',
        //   ImgData: [
        //     { path: '' }
        //   ]
        // }
      ],
      spaceList: {
        spaceName: ''
      }
    }
  },
  computed: {
    apiParams () {
      return {
        // pageSize: this.pageSize,
        // pageNo: this.pageNo,
        // name: this.name,
        // id: this.oneCategory
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    pageSize (newVal, oldVal) {
      if (this.pageTotal > newVal) {
        this.seeMore()
        return false
      }
      if (this.pageTotal < oldVal) {
        return false
      }
      this.seeMore()
    },
    total (val) {
      if (val === 1) {
        this.isShowPage = false
      } else {
        this.isShowPage = true
      }
    }
  },
  created () {
    this.getSpaceList()
  },
  methods: {
    // 排序
    keysort (key, desc) {
      return function (a, b) {
        return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key])
      }
    },
    // 冒泡排序
    sortJson (json, key) {
      for (var i = 0; i < json.length; i++) {
        for (var j = 0; j < json.length - 1; j++) {
          if (json[j][key] > json[j + 1][key]) {
            var temp = json[j]
            json[j] = json[j + 1]
            json[j + 1] = temp
          }
        }
      }
      return json
    },
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.seeMore()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.seeMore()
    },
    getSpaceList () {
      this.$axios.post('/api/space/getSpaceDetailsById', {
        id: this.$route.query.spaceId
        // id: '76729d22fd77483aaa3d998b6e1a54dd'
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          let arr = res.space
          let brr = res.comment
          if (arr[0].startTime !== null) {
            this.qtPrice = true
          }
          if (arr[0].startTimeAm !== null) {
            this.sbtPrice = true
          }
          if (arr[0].startTimePm !== null) {
            this.xbtPrice = true
          }
          // console.log(arr)
          // console.log(brr)
          this.spaceList.spaceName = arr[0].spaceName
          this.spaceList.createTime = arr[0].createTime.substring(0, 10) + ' ' + arr[0].createTime.substring(11, 19)
          this.spaceList.type = arr[0].type
          if (arr[0].type === 1) {
            this.typeSpace = 1
          } else {
            this.typeSpace = 2
          }
          this.spaceList.mobile = arr[0].mobile
          this.spaceList.architecturalStyle = arr[0].architecturalStyle
          this.spaceList.feature = arr[0].feature
          this.spaceList.description = arr[0].description
          this.spaceList.startTime = arr[0].startTime
          this.spaceList.endTime = arr[0].endTime
          this.spaceList.publicPrice = arr[0].publicPrice
          this.spaceList.maxPeople = arr[0].maxPeople
          this.spaceList.admissionEquipment = arr[0].admissionEquipment
          this.spaceList.publicWeekendPrice = arr[0].publicWeekendPrice
          this.spaceList.maxPeopleWeekend = arr[0].maxPeopleWeekend
          this.spaceList.admissionEquipmentWeekend = arr[0].admissionEquipmentWeekend
          this.spaceList.startTimeAm = arr[0].startTimeAm
          this.spaceList.endTimeAm = arr[0].endTimeAm
          this.spaceList.publicPriceHalfAm = arr[0].publicPriceHalfAm
          this.spaceList.maxPeopleAm = arr[0].maxPeopleAm
          this.spaceList.admissionEquipmentAm = arr[0].admissionEquipmentAm
          this.spaceList.publicWeekendPriceHalfAm = arr[0].publicWeekendPriceHalfAm
          this.spaceList.maxPeopleAmWeekend = arr[0].maxPeopleAmWeekend
          this.spaceList.admissionEquipmentAmWeekend = arr[0].admissionEquipmentAmWeekend
          this.spaceList.startTimePm = arr[0].startTimePm
          this.spaceList.endTimePm = arr[0].endTimePm
          this.spaceList.publicPriceHalfPm = arr[0].publicPriceHalfPm
          this.spaceList.maxPeoplePm = arr[0].maxPeoplePm
          this.spaceList.admissionEquipmentPm = arr[0].admissionEquipmentPm
          this.spaceList.publicWeekendPriceHalfPm = arr[0].publicWeekendPriceHalfPm
          this.spaceList.maxPeoplePmWeekend = arr[0].maxPeoplePmWeekend
          this.spaceList.admissionEquipmentPmWeekend = arr[0].admissionEquipmentPmWeekend
          if (arr[0].stayPriceFc === null) {
            this.stayPrice = false
          } else {
            this.spaceList.stayPriceFc = arr[0].stayPriceFc
            this.spaceList.stayPriceMd = arr[0].stayPriceMd
          }
          if (arr[0].lunchPriceFc === null) {
            this.lunchPrice = false
          } else {
            this.spaceList.lunchPriceFc = arr[0].lunchPriceFc
            this.spaceList.lunchPriceMd = arr[0].lunchPriceMd
          }
          if (arr[0].dinnerPriceFc === null) {
            this.dinnerPrice = false
          } else {
            this.spaceList.dinnerPriceFc = arr[0].dinnerPriceFc
            this.spaceList.dinnerPriceMd = arr[0].dinnerPriceMd
          }
          this.spaceList.facilities = arr[0].facilities
          this.spaceList.notes = arr[0].notes.split('。')
          console.log(this.spaceList.notes)
          this.spaceList.title = arr[0].title
          this.spaceList.avatar = arr[0].avatar
          this.spaceList.cover = arr[0].cover
          this.spaceList.roomPrice = arr[0].roomPrice
          this.spaceList.roomWeekendPrice = arr[0].roomWeekendPrice
          this.spaceList.roomPriceHalfAm = arr[0].roomPriceHalfAm
          this.spaceList.roomWeekendPriceHalfAm = arr[0].roomWeekendPriceHalfAm
          this.spaceList.roomPriceHalfPm = arr[0].roomPriceHalfPm
          this.spaceList.roomWeekendPriceHalfPm = arr[0].roomWeekendPriceHalfPm
          let roomList = []
          for (let i = 0; i < arr[0].spaceRoomPrices.length; i++) {
            let str = arr[0].spaceRoomPrices[i].spaceImages
            let imgList = []
            for (let j = 0; j < str.length; j++) {
              imgList.push({
                path: str[j].path,
                uid: str[j].uid
              })
            }
            if (arr[0].spaceRoomPrices[i].type === '1') {
              this.imgsDataPublic.roomDes = arr[0].spaceRoomPrices[i].roomDes
              // this.imgsDataPublic.ImgData = imgList.sort(this.keysort('uid', false))
              this.imgsDataPublic.ImgData = this.sortJson(imgList, 'uid')
              console.log(this.imgsDataPublic)
            }
            // console.log(arr[0].spaceRoomPrices[i].type.indexOf('2'))
            if (arr[0].spaceRoomPrices[i].type === '2') {
              this.roomImg = true
              roomList.push({
                roomName: arr[0].spaceRoomPrices[i].roomName,
                roomDes: arr[0].spaceRoomPrices[i].roomDes,
                roomPosid: arr[0].spaceRoomPrices[i].roomPosid
              })
              // if (arr[0].spaceRoomPrices[i].length === 1)
              this.imgsDataRoom.push({
                roomName: arr[0].spaceRoomPrices[i].roomName,
                roomDes: arr[0].spaceRoomPrices[i].roomDes,
                roomPosid: arr[0].spaceRoomPrices[i].roomPosid,
                // ImgData: imgList.sort(this.keysort('uid', false))
                ImgData: this.sortJson(imgList, 'uid')
              })
              console.log(this.imgsDataRoom)
            }
            if (arr[0].spaceRoomPrices[i].type === '3') {
              this.ypImg = true
              this.imgsDataYp.push({
                roomName: arr[0].spaceRoomPrices[i].roomName,
                roomDes: arr[0].spaceRoomPrices[i].roomDes,
                roomPosid: arr[0].spaceRoomPrices[i].roomPosid,
                // ImgData: imgList.sort(this.keysort('uid', false))
                ImgData: this.sortJson(imgList, 'uid')
              })
              console.log(this.imgsDataYp)
            }
          }
          // this.roomData = [...roomList].sort(this.keysort('roomPosid', false))
          this.roomData = this.sortJson([...roomList], 'roomPosid')
          this.imgsDataRoom = this.sortJson(this.imgsDataRoom, 'roomPosid')
          // this.imgsDataRoom = this.imgsDataRoom.sort(this.keysort('roomPosid', false))
          // this.imgsDataYp = this.imgsDataYp.sort(this.keysort('roomPosid', false))
          this.imgsDataYp = this.sortJson(this.imgsDataYp, 'roomPosid')
          let commentList = []
          for (let v = 0; v < brr.length; v++) {
            commentList.push({
              star: brr[v].star,
              name: brr[v].name,
              content: brr[v].content,
              createTime: brr[v].createTime,
              photo: brr[v].photo
            })
          }
          this.userData = [...commentList]
        }
      })
    },
    seeSpaceImg () {
      this.isShow = true
    },
    upSpaceImg () {
      this.isShow = false
    },
    dateFormat (row, column) {
      var date = row.createTime.substring(0, 10) + ' ' + row.createTime.substring(11, 19)
      return date
    },
    seeMore () {
      this.dialogTableVisible = true
      this.$axios.post('/api/space/getAllSpaceCommentById', {
        id: this.$route.query.spaceId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          console.log(res)
          let crr = res.spaceComment
          let commentList1 = []
          for (let k = 0; k < crr.length; k++) {
            commentList1.push({
              star: crr[k].star,
              name: crr[k].name,
              content: crr[k].content,
              createTime: crr[k].createTime,
              photo: crr[k].photo
            })
          }
          this.userDataMore = [...commentList1]
          this.total = res.total
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.spaceDetail
  // background #fff
  .infoBox
    width 100%
    padding-left 30px
    background #fff
    // display flex
    // flex-flow row wrap
    .header
      height 50px
      padding-top 20px
      position relative
      .logo
        width 50px
        height 50px
        background #123
        border-radius 10px
      .spaceTitle
        position absolute
        font-size 20px
        left 70px
        top 34px
      span
        position absolute
        font-size 14px
        right 200px
        top 34px
    .content
      margin-top 50px
      font-size 14px
      padding-bottom 30px
      .cover
        width 800px
        height auto
        margin-left calc(50% - 400px)
      .spaceImg
        margin-left calc(50% - 400px)
      .btt
        display flex
        width 88%
        justify-content space-between
      div
        margin-top 20px
        span
          // margin-left 18%
      .btn1
        margin-left calc(50% - 100px)
      .btn2
        margin-left 95%
        position fixed
        bottom 2%
        right 2%
        z-index 99
  .priceBox
    margin-left 30px
    margin-right 30px
    background #fff
    margin-top 30px
    .head
      // padding 20px 16px 16px
      height 55px
      border-bottom 1px solid #F2F6FC
      padding 0 24px
      font-size 16px
      line-height 50px
    .content
      // padding-bottom 20px
      .stage
        border-bottom 2px solid #F2F6FC
        padding-bottom 20px
        .stageTitle
          height 40px
          margin-top 10px
          font-size 14px
          padding 0 24px
          line-height 40px
        .usualPrice
          padding 0 24px
          .title
            height 30px
            width 100%
            margin-top 10px
            padding-top 10px
            font-size 14px
            line-height 30px
            font-weight bold
          div
            line-height 22px
            font-size 14px
            span
              margin-left 50px
              font-size 14px
            p
              display inline-block
              font-size 12px
              color gray
      .facil
        line-height 22px
        padding 0 24px
        margin-top 16px
        font-size 14px
        p
          display inline-block
          font-size 12px
          color gray
        .notes
          margin-left 80px
      .btn
        margin-top 20px
        margin-left 47%
        margin-bottom 20px
</style>
